<template>
	<view class="box">
		<view v-if="headerShow" class="header active">
			<view class="headerModel">
				<view class="iconfont icon-xiangzuojiantou" @click="navBack">
				</view>
			</view>

			<view class="headerModel" @click="switchTo">
				<view class="iconfont icon-31gouwuche">
				</view>
			</view>
		</view>
		<view v-else class="header">
			<view class="headerModel">
				<view class="iconfont icon-xiangzuojiantou" @click="navBack">
				</view>
			</view>
			<view class="headerContent">
				<view :class="{active: toState === 0}" @click="changeState(0,$event)">商品</view>
				<view :class="{active: toState === 1}" @click="changeState(1,$event)">评论</view>
				<view :class="{active: toState === 2}" @click="changeState(2,$event)">详情</view>
			</view>
			<view class="headerModel">
				<view class="iconfont icon-31gouwuche">
				</view>
			</view>
		</view>
		<view class="main" id="main">
			<u-swiper :list="detail[0]?.banner" name="img" mode="rect" height="750"></u-swiper>
			<view class="container1">
				<view class="price">
					<view class="newPrice">
						<text>￥</text>
						{{detail[0]?.price}}
					</view>
					<view class="oldPrice">
						<text>￥</text>
						{{detail[0]?.old_price}}
					</view>
				</view>
				<view class="content">
					{{detail[0]?.name}}
				</view>
				<view class="mF">
					<view>快递:包邮</view>
					<view class="sales">月销{{detail[0]?.sales}}</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comment" id="comment">
			<view class="commentTitle">
				<view>评价({{commentList.length}})</view>
				<view class="commentMore" @click="toCommentMore">查看更多</view>
			</view>
			<view class="commentContent">
				<view class="cItem" v-for="comment in commentList" :key="comment._id">
					<view class="cItemTitle">
						<view class="avatar">
							<u-avatar :src="comment.userInfo?.avatar" size="60"></u-avatar>
							<text>{{comment.userInfo?.nickname}}</text>
						</view>
						<view class="score">
							<u-rate :count="5" disabled v-model="comment.score"></u-rate>
						</view>
					</view>
					<view class="attr">
						{{comment.attr}}
					</view>
					<view class="cItemContent">
						{{comment.content}}
					</view>
					<view class="cItemImageS">
						<view class="cItemImage" v-for="(item,index) in comment.images" :key="index">
							<image :src="item" mode="heigthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail" id="detail">
			<view class="detailTitle">
				图文详情
			</view>
			<view class="detailContent" v-html="detail[0]?.desc"></view>
		</view>
		<view class="footer" v-if="params.uid">
			<view class="collection" @click="sendToggleFav">
				<image v-if="is_fav === 0" src="../../static/images/my/pingjia1.png"></image>
				<image v-else src="../../static/images/my/pingjia.png"></image>
			</view>
			<view @click="showShopCart" class="addShopCart">加入购物车</view>
			<view @click="showShopCart('buy')">立即购买</view>
		</view>
		<view class="footer" v-else>
			<view @click="showShopCart" class="addShopCart">加入购物车</view>
			<view @click="showShopCart('buy')">立即购买</view>
		</view>
		<!-- 选择 -->
		<addShopCart :goodsDetail="detail[0]"  v-model:showFalg="flag" :params="params"></addShopCart>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed,
		nextTick
	} from 'vue'
	import {
		userStore
	} from '../../stores/userInfo/userInfo.js'
	import {
		getToken
	} from '../../utils/localStoreToken.js'
	import {
		home
	} from '@/api'
	import pageScroll from './pageScroll.js'
	// 加入购物车
	import addShopCart from './components/addShopCart.vue'
	let flag = ref(false)
	//  点击锚点跳转到页面上的位置
	let {
		toState,
		changeState,
		headerShow,
		getTop
	} = pageScroll()
	
	let params = reactive({
		goods_id: '',
		uid: '',
		type: ''
	})
	
	
	
	// 商品详情
	let detail = ref([])
	// 收藏
	let is_fav = ref(0)
	// 商品评论
	let commentList = ref([])
	let commentCount = ref(0)
	let commentParams = reactive({
		skip: 0,
		limit: 5,
		goods_id: ''
	})
	// 显示选择购物车
	function showShopCart(buy){
		if(!params.uid){
			uni.$u.toast('请先去登录')
			setTimeout(() => {
				let currentRoute = getCurrentPages()[getCurrentPages().length - 1]
				uni.navigateTo({
					url: `/pages/user/login/login?toUrl=${currentRoute.$page.path}?goods=${currentRoute.$page.options.goods}`
				})
			},500)
			return
		}
		if(buy){
			params.type= buy
		}else {
			params.type= ''
		}
		flag.value = true
	}


	// 发送切换收藏还是不收藏
	function sendToggleFav() {
		home.reqtoggleFav({...params, is_fav:is_fav.value}).then(res => {
			if(res.code === 1) {
				uni.$u.toast(`${res.is_fav===0?'取消收藏':'收藏成功'}`)
				is_fav.value = res.is_fav
			}
		})
	}
	// 去到商品评论列表
	function toCommentMore() {
		uni.navigateTo({
			url:`/pages/commentList/commentList?goods_id=${commentParams.goods_id}`
		})
	}
	// 获取数据
	onLoad((goods) => {
		let user =  userStore()
		params.goods_id = goods.goods
		params.uid = user.userInfo._id
		commentParams.goods_id = goods.goods
		getGoodsDetail()
		getCommentList()
	})
	onShow(() => {
		uni.pageScrollTo({
			scrollTop: 0
		})
	})
	// 获取详情数据
	function getGoodsDetail() {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		home.reqGoodsDetail(params).then(res => {
			if (res.code === 1) {
				res.data[0].desc = res.data[0].desc.replace(/<img/gi, '<img width="100%"')
				is_fav.value = res.is_fav
				detail.value = res.data
				uni.hideLoading()
			}
		})
	}
	

	/* 获取商品评论 */
	function getCommentList() {
		home.reqComment(commentParams).then(res => {
			if (res.code === 1) {
				let list = commentList.value
				list.push(...res.data)
				list = list.map(item => {
					if(item.images) {
						return {...item, images: item.images.split(',')}
					}
					return {...item, images: []}
				})
				commentList.value = list
				commentCount.value = res.count - commentList.value.length
			}
		})
	}
	// switchTo
	function switchTo(){
		uni.switchTab({
			url: '/pages/shopCart/shopCart'
		})
	}
	// navBack
	function navBack() {
		uni.navigateBack()
	}

</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 100rpx;
		background-color: #fff;
		z-index: 99999;
	}
	/* header头部 */
	.header {
		position: fixed;
		left: 0;
		right: 0;
		padding: 0 15rpx;
		padding-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		background-color: #fff;
		&.active {
			opacity: 0.5;
		}
		.headerContent {
			flex: 1;
			display: flex;
			justify-content: space-evenly;
			font-size: 30rpx;
			color: #4f4f4f;
			line-height: 80rpx;
			.active {
				color: #000;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					background-color: #fdd100;
					width: 30rpx;
					height: 5rpx;
				}
			}
		}
	.headerModel {
			background: rgba(0, 0, 0, 0.5);
			padding: 8rpx;
			border-radius: 50%;
			color: #fff;
		}
	}
	/* 内容 */
	.main {
		margin-bottom: 20rpx;
		.container1 {
			padding: 15rpx;
			background-color: #fff;
		}
		.price {
			display: flex;
			align-items: baseline;
			font-size: 25rpx;
			color: #bbbbbb;
			margin-bottom: 15rpx;
			.newPrice {
				color: red;
				font-size: 35rpx;
				margin-right: 20rpx;
				text {
					font-size: 25rpx;
					margin-right: -10rpx;
				}
			}
			.oldPrice {
				text-decoration: line-through;
			}
		}
		.content {
			margin: 15rpx 0;
			color: #161616;
			font-weight: 550;
		}
		.mF {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #aaa;
			font-size: 20rpx;
		}
	}
	/* 评论 */
	.comment {
		padding: 15rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.commentTitle {
			@include flex1(space-between, baseline);
			font-size: 30rpx;
			font-weight: 550;
			.commentMore {
				font-size: 20rpx;
				color: #888;
			}
		}
		.commentContent {
			margin: 15rpx 0;
			.cItem {
				margin: 15rpx 0;
				width: 100%;
				.cItemTitle {
					@include flex1(space-between);
					.avatar {
						display: flex;
						align-items: center;
						text {
							margin-left: 15rpx;
							font-size: 15rpx;
						}
					}
				}
				.attr {
					color: #ccc;
					font-size: 10rpx;
					margin: 12rpx 0;
				}
				.cItemContent {
					font-size: 20rpx;
					font-weight: 550;
				}
				
				.cItemImageS{
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin: 15rpx 0;
					.cItemImage {
						width: 30%;
						margin: 0 5rpx;
						image{
							width: 100% !important;
							height: 160rpx;
							margin: 0 5rpx;
						}
						&:empty{
							display: none;
						}
					}
					&:after{
						content: '';
						width: 30%;
					}
				}
			}
		}
	}
	/* 详情 */
	.detail {
		padding: 15rpx;
		background-color: #fff;
		.detailTitle {
			@include flex1(space-between, baseline);
			font-size: 30rpx;
			font-weight: 550;
			margin-bottom: 15rpx;
		}
		.detailContent{
			width: 100%;
			
		}
		
	}

	/* 底部 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		z-index: 999;
		background-color: #161616;
		.collection{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			background-color: #ffffff;
			image{
				width: 35rpx;
				height: 35rpx;
			}
		}
		.addShopCart{
			background-color: #fdd100;
		}
		view {
				width: 50%;
				line-height: 100rpx;
				color: #fff;
				text-align: center;
				background-color: #fb5248;
				font-size: 30rpx;
				
		
				&:active {
					opacity: 0.8;
				}
			}
	}
</style>
